<template>
	<view>
		<view class="addr-wrapper" @click="addrClic">
			<view class="addr-detail">
				<view class="name-and-mobile">
					<image src="/static/user/icon9@2x.png" mode=""></image>
					<text class="name">收货人：{{ 'name' in addr_item ? addr_item.name : 'xxx' }}</text>
					<text class="mobile">{{ 'mobile' in addr_item ? addr_item.mobile : 'xxx-xxx-xxxxx' }}</text>
				</view>
				<view class="addr-info">
					<text>收货地址:{{ 'address' in addr_item ? $db.getAddrById(addr_item.area_id) + ' ' + addr_item.address : '请选择地址' }}</text>
				</view>
			</view>
			<image class="addr-right" src="/static/public/more@2x.png" mode=""></image>
			<image class="addr-bottom" src="/static/submit-order/tiao@2x.png" mode=""></image>
		</view>
		<view class="shop-head">
			<image src="/static/public/dianp@2x.png" mode=""></image>
			<text class="title">Musn's</text>
		</view>
		<view class="shop-detail-wrapper">
			<image :src="goods_img" mode=""></image>
			<view class="name-and-price">
				<text class="name">{{ name }}</text>
				<text class="price">￥{{ price }}</text>
			</view>
			<!-- <text class="nums">×1</text> -->
		</view>
		<view class="card-list">
			<picker class="" :range="picker_range_array.gender" @change="genderChange">
				<view class="card-item">
					<view class="left"><text>性别</text></view>
					<view class="right">
						<text>{{ gender }}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
			<view class="card-item">
				<view class="left"><text>身高(cm)</text></view>
				<view class="right"><input type="number" value="" placeholder="请输入您的身高" v-model="user_height" /></view>
			</view>
			<view class="card-item">
				<view class="left"><text>体重(kg)</text></view>
				<view class="right"><input type="number" value="" placeholder="请输入您的体重" v-model="user_weight" /></view>
			</view>
			<picker class="" :range="picker_range_array.exercise" @change="chekeIsExercise">
				<view class="card-item">
					<view class="left"><text>是否健身</text></view>
					<view class="right">
						<text>{{ user_is_exercise }}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
			<picker class="" :range="demand_value_list" @change="checkDemand">
				<view class="card-item">
					<view class="left"><text>需求</text></view>
					<view class="right">
						<text>{{ user_check_demand.type_name }}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
			<picker class="" mode="date" :start="tomorrow" :end="end_day" @change="checkStartDay" :value="check_day">
				<view class="card-item">
					<view class="left"><text>计划开始时间</text></view>
					<view class="right">
						<text>{{ check_day }}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
			<picker class="" mode="time" @change="checkWuTime" :value="check_wu_time">
				<view class="card-item">
					<view class="left"><text>午餐预约时间</text></view>
					<view class="right">
						<text>{{ check_wu_time }}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
			<picker class="" mode="time" @change="checkWanTime" :value="check_wan_time">
				<view class="card-item">
					<view class="left"><text>晚餐预约时间</text></view>
					<view class="right">
						<text>{{ check_wan_time }}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
		</view>

		<view class="card-list">
			<view class="card-item">
				<view class="left"><text>配送方式</text></view>
				<view class="right"><text>同城快递</text></view>
			</view>
			<view class="card-item" @click="openFoodNeeds">
				<view class="left">
					<text>填写需求</text>
				</view>
				<view class="right">
					<text v-if="message == '' && check_material_ids.length <= 0">未填写</text>
					<text v-else>已填写</text>
					<image src="../../static/public/more@2x.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="card-list shop-price-wrapper">
			<view class="card-item">
				<view class="left">
					<text>
						商品金额
						<br />
						运费
					</text>
				</view>
				<view class="right">
					<text>
						￥{{ price }}
						<br />
						+￥{{ Number(freight).toFixed(2) }}
					</text>
				</view>
			</view>
		</view>

		<view class="bottom-wrapper">
			<text class="total">
				合计:￥{{ Number(freight).toFixed(2) }}
				<text class="del-price">{{ (Number(price) + Number(freight)).toFixed(2) }}</text>
			</text>
			<text class="btn" @click="lowerOrder">提交订单</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			coupon_id: 0, //优惠券id
			plan_id: 0, //周期购id

			picker_range_array: {
				gender: ['男性', '女性'],
				exercise: ['是', '否']
			},
			gender: '男性', //性别
			demand_key_list: [],
			demand_value_list: [],
			user_check_demand: {},
			tomorrow: '',
			end_day: '',

			name: '', //周期购商品名称
			plan_desc: '', //商品介绍
			price: 0, //商品价格
			goods_img: '', //商品图片
			addr_item: {}, //用户选择的地址
			user_height: '', //用户的身高
			user_weight: '', //用户的体重
			user_is_exercise: '否', //用户是否健身
			check_material_ids: [], //用户选择的备注食材
			message: '', //用户的留言
			check_day: '', //用户的预约时间
			check_wu_time: '12:00', //午餐预约时间
			check_wan_time: '18:00', //晚餐预约时间
			freight: 0 //运费
		};
	},
	onLoad(o) {
		if (o.coupon_id) {
			this.coupon_id = o.coupon_id;
		}
	},
	mounted() {
		let date = new Date();
		this.tomorrow = `${date.getUTCFullYear()}-${(date.getUTCMonth() + 1).toString().length == 1 ? '0' + (date.getUTCMonth() + 1) : date.getUTCMonth() + 1}-${
			(date.getDate() + 1).toString().length == 1 ? '0' + (date.getDate() + 1) : date.getDate() + 1
		}`;
		this.check_day = this.tomorrow;
		date = new Date(date.getTime() + 30 * 24 * 3600 * 1000);
		this.end_day = `${date.getUTCFullYear()}-${(date.getUTCMonth() + 1).toString().length == 1 ? '0' + (date.getUTCMonth() + 1) : date.getUTCMonth() + 1}-${
			(date.getDate() + 1).toString().length == 1 ? '0' + (date.getDate() + 1) : date.getDate() + 1
		}`;
		this.getData();
	},
	methods: {
		getData: function() {
			// 获取优惠券详情
			this.$api
				.getCouponInfo({
					coupon_id: this.coupon_id
				})
				.then(res => {
					console.log(res);
					this.plan_id = res.data.plan_id;
					this.freight = res.data.freight;
					// 获取计划详情
					this.getCycleInfo();
				});
			// 获取需求列表
			this.$api
				.orderDemand()
				.then(res => {
					console.log(res);
					this.demand_list = res.data;
					for (let v of res.data) {
						this.demand_key_list.push(v.id);
						this.demand_value_list.push(v.type_name);
					}
					this.user_check_demand = {
						id: this.demand_key_list[0],
						type_name: this.demand_value_list[0]
					};
				})
				.catch(err => {
					if (err.msg) this.$db._ShowToast(err.msg);
				});
			// 获取用户默认地址
			this.$api.getUserDefaultAddr().then(res => {
				// console.log(res);
				this.addr_item = res.data;
			});
		},
		getCycleInfo: function() {
			// 获取周计划详情
			this.$api
				.cycleInfo({
					id: this.plan_id
				})
				.then(res => {
					console.log(res);
					this.name = res.data.name;
					this.plan_desc = res.data.plan_desc;
					this.price = res.data.price;
					this.goods_img = res.data.detail_cover;
				})
				.catch(err => {
					if (err.msg) this.$db._ShowToast(err.msg);
				});
		},
		addrClic: function() {
			// 选择地址
			uni.$once('chack_addr', res => {
				if (!res.data) {
					return false;
				}
				this.addr_item = res.data;
				this.$db._GoBack();
			});
			this.$db._NavTo('addressList_page');
		},
		genderChange: function(value) {
			this.gender = this.picker_range_array.gender[value.detail.value];
		},
		chekeIsExercise: function(v) {
			// 用户选择是否健身
			this.user_is_exercise = this.picker_range_array.exercise[v.target.value];
		},
		checkDemand: function(value) {
			// 用户选择需求
			this.user_check_demand = {
				id: this.demand_key_list[value.detail.value],
				type_name: this.demand_value_list[value.detail.value]
			};
		},
		checkStartDay: function(v) {
			// 用户选择计划开始时间
			console.log(v);
			this.check_day = v.target.value;
		},
		checkWuTime: function(v) {
			// 用户选择午餐时间
			console.log(v);
			this.check_wu_time = v.target.value;
		},
		checkWanTime: function(v) {
			// 用户选择晚餐时间
			console.log(v);
			this.check_wan_time = v.target.value;
		},
		openFoodNeeds: function() {
			// 接收需求数据
			uni.$once('food_needs_submit', res => {
				if (!res.data) {
					return false;
				}
				this.check_material_ids = res.data.check_material_ids;
				console.log(this.check_material_ids);
				this.message = res.data.message;
				this.$db._GoBack();
			});
			// 打开添加需求页面
			this.$db._NavTo('food_needs_page', {
				check_material_ids: JSON.stringify(this.check_material_ids),
				message: this.message
			});
		},
		lowerOrder: function() {
			// 下单
			if (!'id' in this.addr_item || !this.addr_item.id) {
				this.$db._ShowToast('请选择收货地址');
				return false;
			}
			if (!this.user_height) {
				this.$db._ShowToast('请输入您的身高');
				return false;
			}
			if (!this.user_weight) {
				this.$db._ShowToast('请输入您的体重');
				return false;
			}
			let day_arr = this.check_day.split('-');
			let date_day = new Date(Number(day_arr[0]), Number(day_arr[1]) - 1, Number(day_arr[2]), 0);

			let wu_arr = this.check_wu_time.split(':');
			let date_wu = new Date(1970, 0, 1, Number(wu_arr[0]) + 8, Number(wu_arr[1]), 0);

			let wan_arr = this.check_wan_time.split(':');
			let date_wan = new Date(1970, 0, 1, Number(wan_arr[0]) + 8, Number(wan_arr[1]), 0);
			this.$api
				.lowerOrder({
					goods_id: this.plan_id,
					address_id: this.addr_item.id,
					coupon_id: this.coupon_id,
					sex: this.gender == '男性' ? 1 : 2,
					height: this.user_height,
					width: this.user_weight,
					width: this.user_weight,
					is_keep: this.user_is_exercise == '是' ? 1 : 2,
					cyclically_id: this.user_check_demand.id,
					material_id: this.check_material_ids,
					message: this.message,
					p_time: Math.round(date_day.getTime() / 1000),
					wu_time: Math.round(date_wu.getTime() / 1000),
					wan_time: Math.round(date_wan.getTime() / 1000)
				})
				.then(res => {
					// 支付
					this.$api
						.wxPay({
							ids: res.data.order_id
						})
						.then(ret => {
							if ('data' in ret && ret.data === 10059) {
								this.$db._NavTo('submited-order-page', {
									order_id: res.data.order_id
								}, this.$db.navToMethod[1]);
							} else {
								location.href = ret.data.url
							}
						});
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fafafa;
	padding-bottom: 90rpx;
}

.addr-wrapper {
	position: relative;
	padding: 38rpx 38rpx 60rpx;
	display: flex;
	background: #fafafa;

	.addr-detail {
		width: 100%;
		flex-shrink: 1;

		.name-and-mobile {
			display: flex;
			align-items: center;

			image {
				margin-right: 14rpx;
				width: 25rpx;
				height: 29rpx;
			}

			.name,
			.mobile {
				font-size: 28rpx;
				color: #252525;
			}

			.mobile {
				margin-left: auto;
			}
		}

		.addr-info {
			margin-top: 16rpx;
			margin-left: 39rpx;

			text {
				font-size: 24rpx;
				color: #616161;
			}
		}
	}

	.addr-right {
		flex-shrink: 0;
		margin: auto 0 auto 34rpx;
		width: 12rpx;
		height: 22rpx;
	}

	.addr-bottom {
		position: absolute;
		bottom: 20rpx;
		left: 0;
		width: 100%;
		height: 6rpx;
	}
}

.shop-head {
	padding: 18rpx 38rpx;
	display: flex;
	align-items: center;
	background: #ffffff;

	image {
		width: 26rpx;
		height: 23rpx;
	}

	text {
		margin-left: 14rpx;
		font-size: 28rpx;
		color: #494949;
	}
}

.shop-detail-wrapper {
	padding: 38rpx 40rpx;
	display: flex;
	background: #fafafa;

	image {
		width: 138rpx;
		height: 138rpx;
		border-radius: 10rpx;
	}

	.name-and-price {
		margin-left: 20rpx;
		display: flex;
		flex-flow: column;

		.name {
			font-size: 32rpx;
			color: rgba(37, 37, 37, 1);
		}

		.price {
			margin-top: auto;
			font-size: 28rpx;
			color: #252525;
		}
	}

	.nums {
		margin-top: auto;
		margin-left: auto;
		font-size: 28rpx;
		color: #252525;
	}
}

.card-list {
	margin: 20rpx 0;
	padding: 0 30rpx;
	background: #fff;

	picker + picker {
		.card-item {
			border-top: 1rpx solid #ececec;
		}
	}

	picker + .card-item {
		border-top: 1rpx solid #ececec;
	}
}

.card-item {
	padding: 24rpx 0;
	display: flex;
	background: #fff;

	& + .card-item {
		border-top: 1rpx solid #ececec;
	}

	& + picker {
		.card-item {
			border-top: 1rpx solid #ececec;
		}
	}

	text {
		font-size: 24rpx;
		line-height: 28rpx;
		color: rgba(39, 39, 39, 1);
	}

	.left {
		display: flex;
		align-items: center;

		image {
			margin-right: 10rpx;
			width: 42rpx;
			height: 42rpx;
		}
	}

	.right {
		margin-left: auto;
		display: flex;
		align-items: center;

		text {
			margin-left: 20rpx;
			color: #999999;
		}

		image {
			margin-left: 20rpx;
			width: 12rpx;
			height: 22rpx;
		}

		input {
			margin-left: 50rpx;
			width: 282rpx;
			font-size: 22rpx;
			text-align: right;
			color: rgba(153, 153, 153, 1);
		}
	}
}

.start-date-warpper {
	.right {
		text {
			margin-left: 0;
		}

		input {
			margin-left: 20rpx;
			margin-right: 10rpx;
			width: 60rpx;
			text-align: right;
			font-size: 24rpx;
		}
	}
}

.shop-price-wrapper {
	view:nth-child(1) {
		text {
			line-height: 41rpx;
		}

		.right {
			text-align: right;
		}
	}
}

.bottom-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 90rpx;
	display: flex;
	background: #ffffff;
	box-shadow: 0 0rpx 10rpx rgba(0, 0, 0, 0.5);

	.total {
		line-height: 90rpx;
		margin-left: auto;
		margin-right: 40rpx;

		.del-price {
			margin-left: 10rpx;
			font-size: 24rpx;
			color: #999999;
			text-decoration: line-through;
		}
	}

	.btn {
		display: block;
		height: 90rpx;
		width: 212rpx;
		text-align: center;
		line-height: 90rpx;
		background: #2f2f34;
		color: #ffffff;
	}
}
</style>
